<script setup lang="ts">
  import { nextTick, watch, ref } from "vue"
  import DragBox from "@/views/vue-dnd/dragBox.vue"
  import DropBox from "@/views/vue-dnd/dropBox.vue"

  const dragList = ref([
    {
      name: "A1",
      id: "A111"
    },
    {
      name: "A2",
      id: "A222"
    },
    {
      name: "A3",
      id: "A333"
    },
    {
      name: "A4",
      id: "A444"
    }
  ])

  const dropList = ref([
    {
      name: "",
      id: "",
      dropId: "D1",
      style: {
        position: "absolute",
        left: "30px",
        top: "30px",
      }
    },
    {
      name: "",
      id: "",
      dropId: "D2",
      style: {
        position: "absolute",
        right: "30px",
        top: "30px",
      }
    },
    {
      name: "A3",
      id: "A333",
      dropId: "D3",
      style: {
        position: "absolute",
        left: "30px",
        top: "260px",
      }
    },
    {
      name: "A4",
      id: "A444",
      dropId: "D4",
      style: {
        position: "absolute",
        right: "30px",
        top: "260px",
      }
    }
  ])

  // 拖拽后更新drop的数据
  const changeList = (dragId: string, dropId: string) => {
    const dragIdx = dragList.value.findIndex(i => i.id === dragId)
    const dropIdx = dropList.value.findIndex(i => i.dropId === dropId)
    dropList.value[dropIdx] = {
      ...dropList.value[dropIdx],
      ...dragList.value[dragIdx]
    }
    console.log("dropList.value", dropList.value)
  }

  // 判断drop里面是否已经有drag的item
  const isRepeat = (dragId: string) => {
    const dropItem = dropList.value.find(i => i.id === dragId)
    return dropItem
  }

  // 获取关闭的信息
  const getClose = (res) => {
    // dropList.value.find(i => i.dropId === res.dropId)
    dropList.value.forEach(i => {
      if (i.dropId === res.dropId) {
        i.name = ""
        i.id = ""
      }
    })
  }
</script>

<template>
    <div class="main">
      <div class="drag-left" >
        <DragBox v-for="item in dragList" :key="item.id" :drag-item="item" @changeList="changeList" :is-repeat="isRepeat"/>
      </div>
      <div class="drag-right">
        <DropBox :style="item.style" v-for="item in dropList" :key="item.id" :drop-item="item" @closeBox="getClose" />
      </div>
    </div>
</template>

<style scoped>
  .main {
    padding: 20px;
    display: flex;
    height: calc(100% - 40px);
  }
  .flex {
    display: flex;
  }
  .drag-left {
    min-width: 200px;
  }
  .drag-right {
    flex: 1;
    position: relative;
  }
  .drag-left, .drag-right {
    border: 1px solid black;
    padding: 20px;
  }
  .drag-left-item {
    border: 1px solid black;
    padding: 20px;
    cursor: move;
  }
  .drag-right-item {
    border: 1px dashed black;
    padding: 20px;
    cursor: move;
  }
</style>